Using Cascading Style Sheets
With the advent of version 0.08, xdbcms became able to use and generate cascading style sheets (css). CSS has a number of advantages for web authors, the benefits of which are beyond the scope of this documentation; suffice to say that CSS gives the ability to standardise the look and feel of a website, and to change that look and feel in a very easy way. One of the best examples of the capabilities of css is shown on the website css-zengarden (www.csszengarden.com). Please note though that use of CSS is not mandatory - you can create websites without this facility if desired.
 | Note: to use the CSS facilities, you must a) use the 'tinyMCE' editor (see user preferences), and b) know CSS commands, see below for some examples though. However, using CSS is not mandatory to create your websites. |
Using CSS within XDBCMS should be straight forward, however, it is expected that you know CSS commands.
The CSS definitions for a website are shown in the 'website tree' that appears on the left hand side of the page screens, after the 'Blocks' entry.
Click on the 'Stylesheet items' entry, and you should be shown the list of defined stylesheet items for the current website. To add a new entry, click on 'Add new entry' to bring up the stylesheet item page. This page has two fields:
- Stylesheet item name and
- Stylesheet item text.
Stylesheet Item Name
The name of the stylesheet item is very important - it needs to be unique at the very least, also, it can be prefixed by a special character:
- # - this means an element of this particular 'ID'. The best example of this is 'container'. Version 0.08 bought in a facility where the whole page is contained within an identifier called '#container' - so you can affect how the web page as a whole appears within the browser. For example:
#container
background: url(images/fred.jpg) no-repeat top left;
padding: 00px 50px 0px 50px;
margin: 0px;
position: absolute;
top: 0px;
left: 0px;
Will make all website pages appear flush with the top and bottom of the page, and indented by 50 pixels on the left and right. A single background image 'fred.jpg' will appear at the top left of the generated page, and will not be repeated.
- '.' A full stop at the start of a definition name is used for general text formatting - for example:
.pageheading
font-family : Ariel;
font-size : 15px;
font-color : #99FFFF;
Will give a text style of Ariel, 15 pixels in red
- No prefix character will allow you to alter certain standard HTML elements for example:
body
background-color : #CCCCCC;
Will make the background of all pages be set to light grey.
Note: if you make an alteration to the website stylesheet definitions, on occasion you may not see the effect immediately - this is because of the browser performing 'caching'. That is, the browser doesn't recognise that the the definition has been changed, and uses the old version. If all else fails, opening xdbcms in a new browser window should force the browser to pick up the latest version of the file.
As you change the stylesheet elements you should see the changes in effect when you edit a page - but changes will only appear within the preview and generated websites when you select 'generate' and actually generate the website.
Stylesheet Item Text
The second field is the actual text of the stylesheet item - this is the normal stylesheet text as found in a stylesheet file, except it does not have the opening and closing brackets { }.
Built using XDBCMS